<template>
    <div class="app-header" :style="{background:headerBg,color:titleColor}" :class="{ 'header-table': titleBg}">
      <p class="h-left">
      	<slot name="left"></slot>
      </p>
      <h1 class="app-title">{{title}}</h1>
      <p class="h-right">
      	<slot name="right"></slot>
      </p>
    </div>
</template>
<style lang="less" scoped>
    body .header-table{
        background-color: #eee;
        color:#333;
    }
    .app-header{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 1.2rem;
      /*line-height: 0.5rem;*/
      background: #ffffff;
      color:#333333;
      .h-left,.h-right{
        /*display: block;*/
        position: absolute;
        top:0;
        z-index: 1000;
        width: 0.6rem;
        height: 0.8rem;
        text-align: center;
      }
      .h-left{
        left: 0;
      }
      .h-right{
        right: 0;
      }
      .app-title{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        height: 0.8rem;
        width: 100%;
        text-align: center;
        font-size: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

      }
    }
</style>
<script>
    export default {
      data () {
        return {
          isB: true
        }
      },
      props: {
        title: String,
        titleColor: String,
        headerBg: String,
        titleBg: Boolean
      }
    }
</script>
